<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <img
      style="display:none;"
      id="imgae_0"
      src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
      alt=""
    />
    <canvas id="canvas-line" width="800" height="500">
      <p>您的浏览器不支持canvas！</p>
    </canvas>
    <script>
      let canvas = document.getElementById("canvas-line");
      if (canvas.getContext) {
        let ctx = canvas.getContext("2d");
        let [img, img1] = [new Image(), new Image()];
        img.src = "./1.jpg";
        img1.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";

        img.onload = () => {
          ctx.drawImage(document.getElementById("imgae_0"), 0, 0);
          ctx.fillStyle = "red";
          ctx.drawImage(img, 105, 0, 80, 110);
          //   for (var i = 0; i < 4; i++) {
          //     for (var j = 0; j < 3; j++) {
          //       ctx.drawImage(img, j * 50, i * 38, 50, 38);
          //     }
          //   }

          ctx.beginPath();
          ctx.moveTo(30, 96);
          ctx.lineTo(70, 66);
          ctx.lineTo(103, 76);
          ctx.stroke();
        };
      }
    </script>
  </body>
</html>
